<script setup>
import { ref } from 'vue'
import {
  addSupplierService,
  editSupplierByIdService
} from '@/api/supplierManage.js'
let isEdit = undefined
const dialogVisible = ref(false)
const formRef = ref()
const formModel = ref({
  supplierId: '',
  supplierName: '',
  contactName: '',
  contactPhone: '',
  address: ''
})
const rules = {
  supplierName: [
    { required: true, message: '请输入供应商名称', trigger: 'blur' }
  ],
  contactName: [
    { required: true, message: '请输入联系人名称', trigger: 'blur' }
  ],
  contactPhone: [
    { required: true, message: '请输入联系人电话', trigger: 'blur' },
    {
      pattern: /^1[3-9]\d{9}$/,
      message: '电话格式不正确',
      trigger: 'blur'
    }
  ],
  address: [{ required: true, message: '请输入供应商地址', trigger: 'blur' }]
}

const emit = defineEmits(['success'])
const onSubmit = async () => {
  await formRef.value.validate()
  if (isEdit) {
    await editSupplierByIdService(formModel.value)
    ElMessage.success('编辑成功')
  } else {
    await addSupplierService(formModel.value)
    ElMessage.success('添加成功')
  }
  dialogVisible.value = false
  emit('success')
}

// 组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
// open({})  => 表单无需渲染，说明是添加
// open({ id, cate_name, ... })  => 表单需要渲染，说明是编辑
// open调用后，可以打开弹窗
const open = (row) => {
  dialogVisible.value = true
  formModel.value = { ...row } // 添加 → 重置了表单内容，编辑 → 存储了需要回显的数据
  isEdit = formModel.value.supplierId
}

// 将网络图片地址转换为 File 对象的函数

// 向外暴露方法
defineExpose({
  open
})
</script>

<template>
  <el-dialog
    v-model="dialogVisible"
    :title="isEdit ? '编辑供应商' : '添加供应商'"
    width="30%"
  >
    <el-form
      ref="formRef"
      :model="formModel"
      :rules="rules"
      label-width="100px"
      style="padding-right: 30px"
    >
      <el-form-item label="供应商名称" prop="supplierName">
        <el-input
          v-model="formModel.supplierName"
          placeholder="请输入供应商名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人名称" prop="contactName">
        <el-input
          v-model="formModel.contactName"
          placeholder="请输入联系人名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="联系人电话" prop="contactPhone">
        <el-input
          v-model="formModel.contactPhone"
          placeholder="请输入联系人电话"
        ></el-input>
      </el-form-item>
      <el-form-item label="供应商地址" prop="address">
        <el-input
          v-model="formModel.address"
          placeholder="请输入供应商地址"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="onSubmit"> 确认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style lang="scss" scoped>
.avatar-uploader {
  :deep() {
    .book-pic {
      width: 278px;
      height: 278px;
      display: block;
    }
    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    .el-upload:hover {
      border-color: var(--el-color-primary);
    }
    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 278px;
      height: 278px;
      text-align: center;
    }
  }
}
</style>
